<template>
  <div class="member-list">
    <a-form
      class="search-form"
    >
      <a-row :gutter="24">
        <a-col :lg="8" :xl="6" :xxl="4">
          <a-form-item label="代理级别">
            <a-select v-model="level">
              <a-select-option value="0">全部</a-select-option>
              <a-select-option value="1">省级代理</a-select-option>
              <a-select-option value="2">市级代理</a-select-option>
              <a-select-option value="3">区县代理</a-select-option>
              <!-- 搜索类型  0 全部 1 id 2 账号 3 手机号 -->
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :lg="16" :xl="10" :xxl="7">
          <a-form-item label="所属区域">
            <area-select
              :createPlace="area"
              @handlePlace="selectArea"
            />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="8" :xxl="6">
          <a-form-item label="入驻时间">
            <a-range-picker
              :placeholder="['开始时间', '结束时间']"
              class="select-range-time"
              style="width: 100%"
              v-model="createTime"
              @change="getCreateTime"
            />
          </a-form-item>
        </a-col>
        <a-col :lg="12" :xl="8" :xxl="7">
          <a-form-item label="">
            <a-input-group class="query-item" compact>
              <a-select
                style="width: 40%"
                class="l-select"
                v-model="searchType"
              >
                <a-select-option value="0">全部</a-select-option>
                <a-select-option value="1">代理商ID</a-select-option>
                <a-select-option value="2">代理商编号</a-select-option>
                <a-select-option value="3">代理商名称</a-select-option>
                <a-select-option value="4">代理商手机号</a-select-option>
                <!-- 查询条件 0:全部 1:id 2:编号 3: 姓名 4:手机号 -->
              </a-select>
              <a-input style="width: 60%" placeholder="请输入查询条件" v-model="keywords"/>
            </a-input-group>
          </a-form-item>
        </a-col>
        <a-col :lg="8" :xl="6" :xxl="4">
          <div class="top-btns">
            <a-button
              type="primary"
              html-type="submit"
              @click="searchListData"
            >
              查询
            </a-button>
            <a-button
              html-type="reset"
              @click="resetList"
            >
              重置
            </a-button>
          </div>
        </a-col>
      </a-row>
    </a-form>
    <div class="search-result-list">
      <a-table
        :columns="columns"
        :dataSource="agentListData"
        rowKey="id"
        :pagination='pagination'
        :loading="loading"
      >
        <span slot="is_commission" slot-scope="value, item">
          <a-switch
            checkedChildren="开"
            unCheckedChildren="关"
            :defaultChecked="parsevalue(value)"
            @change="isCommissionKG(item)"
            disabled
          />
        </span>
        <span slot="is_enable" slot-scope="value, item">
          <a-switch
            checkedChildren="开"
            unCheckedChildren="关"
            :defaultChecked="parsevalue(value)"
            @change="isEnableKG(item)"
            disabled
          />
        </span>
        <span slot="action" slot-scope="" class="action-wrap">
          <a>查看详情</a>
          <a>钱包</a>
          <a>优惠券</a>
        </span>
      </a-table>
      <pagination
        :total="total"
        @loadDataList="pageInit"
        ref="pageBand"
      />
    </div>
  </div>
</template>
<script>
import { agentList } from '../../store/agentApi.js'
export default {
  data () {
    return {
      total: 0,
      start_time: 0,
      end_time: 0,
      keywords: '',
      pagination: false,
      loading: false,
      searchType: '0',
      createTime: [],
      area: [],
      level: '0',
      columns: [{
        dataIndex: 'index',
        title: '序号'
      }, {
        title: '代理商ID',
        dataIndex: 'id'
      }, {
        title: '代理商编号',
        dataIndex: 'agent_no'
      }, {
        title: '代理商手机号',
        dataIndex: 'phone'
      }, {
        title: '代理名称',
        dataIndex: 'agent_name'
      }, {
        title: '代理级别',
        dataIndex: 'level_name' // level
      }, {
        title: '余额(元)',
        dataIndex: 'balance'
      }, {
        title: '省份',
        dataIndex: 'province'
      }, {
        title: '城市',
        dataIndex: 'city'
      }, {
        title: '区/县',
        dataIndex: 'district'
      }, {
        title: '入驻时间',
        dataIndex: 'created_at'
      }, {
        title: '分润状态',
        dataIndex: 'is_commission',
        scopedSlots: { customRender: 'is_commission' }
      }, {
        title: '账号状态',
        dataIndex: 'is_enable',
        scopedSlots: { customRender: 'is_enable' }
      }, {
        title: '操作',
        scopedSlots: { customRender: 'action' }
      }],
      agentListData: [],
      options: []
    }
  },
  mounted () {
    
  },
  methods: {
    selectArea ({area, provinceId, cityId, districtId}) {
      this.area = area
      this.provinceId = provinceId
      this.cityId = cityId
      this.districtId = districtId
    },
    // 列表和筛选接口
    pageInit (info) {
      this.loading = true
      var data = {
        searchType: this.searchType,
        page: info.page,
        num: info.pageSize,
        level: this.level
      }
      if (this.start_time != 0) {
        data.startTime = this.start_time
      }
      if (this.end_time != 0) {
        data.endTime = this.end_time
      }
      if (this.keywords !== '') {
        data.name = this.keywords
      }
      if (this.provinceId != '') {
        data.provinceId = this.provinceId
      }
      if (this.cityId != '' || this.cityId == undefined) {
        data.cityId = this.cityId
      }
      if (this.districtId != '' || this.districtId == undefined) {
        data.districtId = this.districtId
      }
      agentList(data).then(res => {
        var array = res.data.list
          for (let i = 0; i < array.length; i++) {
          array[i]['index'] = (info.page - 1) * info.pageSize + (i + 1)
        }
        this.agentListData = array
        this.total = res.data.total_num
        this.loading = false
      })
    },
    // 按条件查询
    searchListData () {
      this.$refs.pageBand.getData()
    },
    // 重置
    resetList () {
      this.searchType = '0'
      this.createTime = []
      this.area= []
      this.provinceId = ''
      this.cityId = ''
      this.districtId = ''
      this.start_time = 0
      this.end_time = 0
      this.level = '0'
      this.keywords = ''
      this.$refs.pageBand.getData()
    },
    // 获取时间戳
    getCreateTime (date, str) {
      if (str[0] && str[1]) {
        this.start_time = (new Date(str[0] + ' 00:00:00')).getTime() / 1000
        this.end_time = (new Date(str[1] + ' 23:59:59')).getTime() / 1000
      } else {
        this.start_time = 0
        this.end_time = 0
      }
    },
    parsevalue (value) {
      return JSON.parse(value)
    },
    // 开关操作
    isCommissionKG (checked) {
      console.log(checked, 'is_commissin')
    },
    isEnableKG (checked) {
      console.log(checked, 'is_enable')
    }
  }
}
</script>
<style>

</style>
